<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/resource/static/base/images/logo.png">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/bootstrap-movie.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/static/base/css/animate.css">
    <style>
        .navbar-brand>img {
            display: inline;
        }

    </style>
    <style>
        .media{
            padding:3px;
            border:1px solid #ccc
        }

    </style>
</head>

<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/film/index" class="navbar-brand" style="width:250px;">
                <img src="${pageContext.request.contextPath}/resource/static/base/images/logo.png" style="height:30px;">&nbsp;微电影
            </a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-left" role="search" style="margin-top:18px;">
                <div class="form-group input-group">
                    <input type="text" id="form-control" class="form-control" placeholder="请输入电影名！">
                    <span class="input-group-btn">
                        <a class="btn btn-default" onclick="doSearch()"><span class="glyphicon glyphicon-search"></span>&nbsp;搜索</a>
                    </span>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <c:if test="${sessionScope.userName =='' or null == sessionScope.userName}">
                    <li>
                        <a class="curlink" href="/person/tologin"><span class="glyphicon glyphicon-log-in"></span>&nbsp;登录</a>
                    </li>
                    <li>
                        <a class="curlink" href="/person/doRegister"><span class="glyphicon glyphicon-plus"></span>&nbsp;注册</a>
                    </li>
                    <li>
                        <a class="curlink" href="/person/tologinUser"><span class="glyphicon glyphicon-user"></span>&nbsp;会员</a>
                    </li>
                </c:if>
                <c:if test="${sessionScope.userName !='' and null != sessionScope.userName}">
                    <li>
                        <a class="curlink" href="/person/toUserInformation"><span class="glyphicon glyphicon-user"></span>&nbsp;${sessionScope.userName}</a>
                    </li>
                    <li>
                        <a class="curlink" href="/person/layout"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a>
                    </li>

                </c:if>
            </ul>
        </div>
        <!--导航-->

    </div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:76px">
    <div class="row">
        <div id="col-md-12" class="col-md-12">
            <ol class="breadcrumb" style="margin-top:6px;">
                <li id="searchli_id">与"${searchName}"有关的电影，共${searchVideo.total}部</li>
            </ol>
        </div>
        <div class="col-md-12" id="searchId">
            <c:forEach items="${searchVideo.list}" var="search">
                <div class="media">
                    <div class="media-left">
                        <a href="/film/player/${search.videoId}/${search.videoName}">
                            <c:if test="${search.videoImages==null}">
                                <img class="media-object" src="${pageContext.request.contextPath}/resource/static/base/images/空白电影.png" alt="" width="100px"height="100px">
                            </c:if>
                            <c:if test="${search.videoImages!=null}">
                            <img class="media-object" src="${pageContext.request.contextPath}/resource/static/base/images/${search.videoImages.imageName}" alt="" width="100px"height="100px">
                            </c:if>
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">${search.videoName}<a href="/film/player/${search.videoId}/${search.videoName}" class="label label-primary pull-right"><span class="glyphicon glyphicon-play"></span>播放影片</a></h4>
                        ${search.videoRecommend}
                    </div>
                </div>
            </c:forEach>
        </div>
        <div class="col-md-12 text-center">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pageNav">
                    <li>
                        <a href="#" onclick="doSearchVideo(1)" aria-label="First">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>

                    <li>
                        <c:choose>
                            <c:when test="${searchVideo.isFirstPage}">
                                <a href="#" aria-label="Previous" onclick="doSearchVideo(1)">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </c:when>
                            <c:otherwise>
                                <a href="#" aria-label="Previous" onclick="doSearchVideo(${searchVideo.pageNum-1})">
                                    <span aria-hidden="true">上一页</span>
                                </a>
                            </c:otherwise>
                        </c:choose>
                    </li>
                    <li><a href="#">${searchVideo.pageNum}&nbsp;/&nbsp;${searchVideo.pages}</a></li>
                    <li>
                        <c:choose>
                            <c:when test="${searchVideo.isLastPage}">
                                <a href="#" aria-label="Next" onclick="doSearchVideo(${searchVideo.pages})">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </c:when>
                            <c:otherwise>
                                <a href="#" aria-label="Next" onclick="doSearchVideo(${searchVideo.pageNum+1})">
                                    <span aria-hidden="true">下一页</span>
                                </a>
                            </c:otherwise>
                        </c:choose>
                    </li>
                    <li>
                        <a href="#" aria-label="Last" onclick="doSearchVideo(${searchVideo.pages})">
                            <span aria-hidden="true">尾页</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!--内容-->
<!--底部-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p>
                    ©&nbsp;2017&nbsp;flaskmovie.imooc.com&nbsp;京ICP备 13046642号-2
                </p>
            </div>
        </div>
    </div>
</footer>
<!--底部-->
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/jquery.singlePageNav.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/base/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/resource/static/lazyload/jquery.lazyload.min.js"></script>
<script src="//cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script>
    $(function() {
        new WOW().init();
    })

</script>
<script>
    $(document).ready(function() {
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
    });
var image;
    function doSearchVideo(page){
        if(page ==null){
            page=1
        }
        var formData={
            "page":page,
            "size":10
        }
        $.ajax({
            url: "/film/changeSearchPage",
            data: formData,
            type: "get",
            dataType: "json",
            success: function (res) {
                var video = res.data.list
                $("#searchId").empty();
                for (var i = 0; i < video.length; i++) {
                    if(video[i].videoImages===null ){
                        image='空白电影.png';
                    }else{
                        image=video[i].videoImages.imageName;
                    }
                    changeSearchVideo(video[i]);
                }
                changeSearchPage(res.data);
            },
            error: function () {

            }
        })

   function changeSearchVideo(search){
        var div ='<div class="media">'+
            '<div class="media-left">'+
            '<a href="/film/player/'+search.videoId+'">'+
            '<img class="media-object" src="/resource/static/base/images/'+image+'" alt="" width="200px"height="200px">'+
            '</a></div>'+
            '<div class="media-body">'+
            '<h4 class="media-heading">'+search.videoName+'<a href="/film/player/'+search.videoId+'/'+search.videoName+'" class="label label-primary pull-right"><span class="glyphicon glyphicon-play">' +
            '</span>播放影片</a></h4>'+search.videoRecommend+'</div>'+
            '</div>';
       $("#searchId").append(div);
    }
    function changeSearchPage(pageInfo){
        $("#pageNav").empty()
        var firstPage= '<li>'+
            '<a href="#" onclick="doSearchVideo(1)" aria-label="First">'+
            '<span aria-hidden="true">首页</span>'+
            '</a>'+
            '</li>';
        var prePageNum = 0;
        if(pageInfo.pageNum<=1){
            prePageNum = 1;

        }else{
            prePageNum = pageInfo.pageNum-1;
        }
        var prevPage='<li>'+'<a href="#" aria-label="Previous" onclick="doSearchVideo('+prePageNum+')">'+
            '<span aria-hidden="true">上一页</span>'+
            '</a>'+'</li>';
        var pageThis ='<li><a href="#">'+pageInfo.pageNum+'&nbsp;/&nbsp;'+pageInfo.pages+'</a></li>';
        var nextPageNum = 0;
        if(pageInfo.pageNum>=pageInfo.pages){
            nextPageNum = pageInfo.pages
        }else{
            nextPageNum = pageInfo.pageNum + 1;
        }
        var nextPage ='<li>'+
            '<a href="#" aria-label="Next" onclick="doSearchVideo('+nextPageNum+')">'+
            '<span aria-hidden="true">下一页</span>'+
            '</a>'+
            '</li>';
        var lastPage='<li>'+
            '<a href="#" aria-label="Last" onclick="doSearchVideo('+pageInfo.pages+')">'+
            '<span aria-hidden="true">尾页</span>'+
            '</a>'+
            '</li>';
        $("#pageNav").append(firstPage);
        $("#pageNav").append(prevPage);
        $("#pageNav").append(pageThis);
        $("#pageNav").append(nextPage);
        $("#pageNav").append(lastPage);
    }

    }
    function doSearch(){

        var searchName = $("#form-control").val();
        if (searchName==''||searchName==null){
            alert("你还什么都没输入")
            return;
        }
        location.href = "/film/doSearch/"+searchName;
        $.ajax({
            url: "/film/doSearchByName/"+searchName,
            type:"get",
            dataType:"json",
            success:function (res){
                $("#col-md-12").empty();
                var li = '<ol class="breadcrumb" style="margin-top:6px;">'+
                    '<li id="searchli_id">与"'+res.msg+'有关的电影，共'+res.data.total+'部</li>'+
                    '</ol>';
                $("#col-md-12").append(li);
            },
            error:function(){

            }
        })
    }
</script>
</body>
</html>
